<template>
  <div id="navigation">
    5555
    <div class="navigationLeft" @click="onClickArrow(-moveLength)"></div>
    <div class="navigationContent" ref="menuWrapper">
      <div
        v-for="(item,index) in showList"
        class="navigationItem"
        :ref="'navigationItemRef'"
        :class="{navigationItemActive:index===current}"
        @click="onClickLink($event.currentTarget,item,index)"
      >
        <div class="navigationImgDiv"
             :style="item.style"
        >
        </div>
        <div class="navigationWord">
          {{ showName(item) }}
        </div>
      </div>
    </div>
    <div class="navigationRight" @click="onClickArrow(moveLength)">555555</div>
    <ArrowCom ref="ArrowComRef" v-if="false">
      <template></template>
    </ArrowCom>
    <ArrowCom2></ArrowCom2>
    絕絕子绝绝子
  </div>
</template>

<script>
// import ArrowCom from "./ArrowCom.vue";
/**/
import ArrowCom2 from "./ArrowCom2.vue";
export default {
  mounted() {
    console.log(this.$refs.ArrowComRef);
  },
  components: {
    ArrowCom: () => import('./ArrowCom.vue'),
    ArrowCom2: ArrowCom2,
  },
  data() {
    return {
      current: 0,
      fixList: [
        {
          name: '省发改委建档重大项目',
          img: 'image 147.png',
          style: {
            background: 'radial-gradient(118% 77% at 50% 22%, #FFDBB9 0%, #F5A459 100%)',
            border: '2.08px solid #FFFFFF',
            'box-shadow': '0px 1.04px 6.24px 0px #467CC5'
          }
        },
        {
          name: '省重点项目',
          img: 'image 143.png',
          style: {
            background: 'radial-gradient(118% 77% at 50% 22%, #C2FBFF 0%, #5CC19D 100%)',
            'box-shadow': '0px 6.24px 14.56px 0px rgba(105, 194, 164, 0.5)'
          }
        },
        {
          name: '年度投资目标任务分解项目',
          img: 'nav3.png',
          style: {
            background: 'radial-gradient(118% 77% at 50% 22%, #C2FBFF 0%, #5CC19D 100%)',
            'box-shadow': '0px 6.24px 14.56px 0px rgba(105, 194, 164, 0.5)'
          }
        },
        {
          name: '中央预算内项目',
          img: 'image 144.png',
          style: {
            background: 'radial-gradient(118% 77% at 50% 22%, #AEE2FF 0%, #479BE8 100%)',
            'box-shadow': '0px 6.24px 14.56px 0px rgba(80, 161, 234, 0.5)'
          }
        },
        {
          name: '地方专项债项目',
          img: 'image 146.png',
          style: {
            background: 'radial-gradient(118% 77% at 50% 22%, #F5CDFF 0%, #7E6BDF 100%)',
            'box-shadow': '0px 6.24px 14.56px 0px rgba(126, 107, 223, 0.5)'
          }
        },
        {
          name: '政策性开发性金融工具项目',
          img: 'nav6.png',
          style: {
            background: 'radial-gradient(118% 77% at 50% 22%, #F5CDFF 0%, #7E6BDF 100%)',
            'box-shadow': '0px 6.24px 14.56px 0px rgba(126, 107, 223, 0.5)'
          }
        },
      ],
      otherList: [
        //{}
      ], // 定义其他的
      moveLength: 400, // 每次移动的长度
    }
  },
  computed: {
    showList() {
      return [
        ...this.fixList,
        ...this.otherList,
      ]
    },
    activeItem() {
      return this.showList[this.current]
    }
  },
  methods: {
    showName(item) {
      return item.name
      // return item.name.length[0].length
    },
    onClickArrow(displacement) {
      throw new Error('55555')
      const wrapper = this.$refs.menuWrapper;
      this.scrollTo(wrapper.scrollLeft + displacement);
    },
    onClickLink(el, item, index) {
      this.$emit('change', item)
      this.current = index
      const wrapper = this.$refs.menuWrapper;
      this.scrollTo(el.offsetLeft - (wrapper.offsetWidth - el.offsetWidth) / 2);
    },
    scrollTo(targetValue, withoutAnimation) {
      const el = this.$refs.menuWrapper;
      const beginTime = Date.now();
      const beginValue = el.scrollLeft;
      const rAF = window.requestAnimationFrame || (func => setTimeout(func, 16));
      const frameFunc = () => {
        let progress
        if (withoutAnimation) {
          progress = 1;
        } else {
          progress = (Date.now() - beginTime) / 250;
        }
        if (progress < 1) {
          el.scrollLeft = beginValue + easeInOutCubic(progress) * (targetValue - beginValue);
          rAF(frameFunc);
        } else {
          el.scrollLeft = targetValue;
        }
      };
      rAF(frameFunc);
    }
  },
}
</script>

<style scoped lang="less">
#navigation {
  color: #f80000;
  ::-webkit-scrollbar {
    width: 0px;
  }
  .test:hover {
    color: #cccccc;
  }

  ::v-deep {
    input {
      padding: 20px;
    }
  }

  @media (max-width: 600px) {
    .class {
      display: none;
    }
  }
}
</style>




